<!-- 分类 -> 商品|店铺 -->
<template>
	<view class="classifyDetail">
		<view class="classifyDetail_top">
			<view class="status_bar"></view>
			<!-- 返回 搜索 -->
			<view class="top">
				<view class="back" @click="goback()"><image src="https://community.chuangxiangdianli.com/images/classify/back .png" mode=""></image></view>
				<view class="serach"><input type="text" confirm-type="search" v-model="searchText" value="" @confirm="search" /></view>
			</view>
			<!-- 分类标签页 -->
			<view class="tab">
				<view :class="navIndex === 1 ? 'active' : ''" @click="changeNav(1)">全部商品</view>
				<view :class="navIndex === 2 ? 'active' : ''" @click="changeNav(2)">店铺</view>
			</view>
			<!-- 排序 -->
			<view class="sort">
				<view :class="sort1.index == 0 ? 'active' : ''" @click="changeSort(0, '', '')">
					综合排序
				</view>
				<view :class="sort1.index == 1 ? 'active' : ''" @click="changeSort(1, 'goods_sale', 'asc')">
					销量
					<view style="display: inline-block">
						<view class="jiantou" :class="sort1.sort_order == 'asc' && sort1.index == 1 ? 'active' : ''" style="transform: rotate(0deg)"></view>
						<view class="jiantou" :class="sort1.sort_order == 'desc' && sort1.index == 1 ? 'active' : ''"></view>
					</view>
				</view>
				<view :class="sort1.index == 2 ? 'active' : ''" @click="changeSort(2, 'goods_price', 'asc')">
					价格
					<view style="display: inline-block">
						<view class="jiantou" :class="sort1.sort_order == 'asc'  && sort1.index == 2 ? 'active' : ''" style="transform: rotate(0deg)"></view>
						<view class="jiantou" :class="sort1.sort_order == 'desc'  && sort1.index == 2  ? 'active' : ''" ></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品数据  -->
		<view class="content">
			<Default
				:showflag='showflag'
				:type="4"
			></Default>
			<!-- 商品 -->
			<view class="content_goods" v-if="navIndex === 1">
				<!-- <view class="goods" v-for="(item, index) in goodsList" :key="item" @click="goGoodDetail(item.id)">
					<view class="left"><image :src="item.goods_master_image" mode=""></image></view>
					<view class="right">
						<view class="title">{{ item.goods_name }}</view>
						<view class="sku">常规版型 | 纯棉</view>
						<view class="price">
							<view>
								<text>￥{{ item.goods_price }}</text>
							</view>
							<view>已抢{{ item.goods_sale }}件</view>
						</view>
						<view class="shopname">李小二的店 ></view>
					</view>
				</view> -->
				<waterfallFlow
					:leftData='leftData'
					:rightData='rightData'
				 />
			</view>

			<!-- 店铺 -->
			<view v-if="navIndex === 2">
				<view class="store" v-for="item in storeList" :key="item">
					<view class="store_top">
						<view class="left"><image :src="item.store_logo ? item.store_logo : 'https://community.chuangxiangdianli.com/images/home/classify.png'" mode=""></image></view>
						<view class="center">
							<view class="titlQe">{{ item.store_name }}</view>
							<view class="evaluation">好评率{{ item.comment_rate }}%</view>
						</view>
						<view class="right"><view>点击进入店铺</view></view>
					</view>
					<view class="bottom">
						<image v-if="item.goods_list.length > 0" v-for="(v, n) in item.goods_list" :src="v.goods_master_image" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import waterfallFlow from '../../components/waterfallFlow/waterfallFlow.vue'
export default {
	components: {
		waterfallFlow
	},
	data() {
		return {
			showflag: false,
			navIndex: 1,
			storeList: [], //店铺列表
			goodsList: [], // 商品列表
			searchText: '',
			sort1: {
				index: 0,
				str: '',
				sort_order: 'desc'
			},
			leftData: [], // 瀑布流左侧数据
			rightData: [], // 瀑布流右侧数据
		};
	},
	onLoad(option) {
		if (option.searchText) {
			this.searchText = option.searchText
			this.search()
		}
	},
	methods: {
		// 商品详情
		goGoodDetail(id) {
			uni.navigateTo({
				url: '/other/goodsDetail/index?goods_id=' + id
			})
		},
		//  更改排序
		changeSort(num, str, str1) {
				if (num == 0) {
					this.sort1.str = ''
					this.sort1.sort_order = ''
				} else {
					if (this.sort1.sort_order == 'desc') {
						this.sort1.sort_order = 'asc'
					} else {
						this.sort1.sort_order = 'desc'
					}
					this.sort1.str = str
				}
				this.sort1.index = num
				this.search()
		},
		//  返回按钮点击事件
		goback() {
			uni.navigateBack();
		},
		//  店铺/商品切换
		changeNav(i) {
			if (i === this.navIndex) return;
			this.navIndex = i;
			this.sort1.index = 0
			this.sort1.str = ''
			this.sort1.sort_order = ''
			this.search()
		},
		//  添加搜索记录
		addHistory() {
			let that = this
			that.$mrequest({
				url: 'Mini/keywords/addKeyword',
				method: 'POST',
				data: {
					keyword: that.searchText
				},
				callBack: function callBack (res) {
					console.log('保存成功奥里给')
				},
				fail: function fail (res) {
					console.log('保存失败给爷爬')
				}
			})
		},
		// 搜索
		search() {
			var that = this
			// 商品
			if (this.navIndex == 1) {
				var data = {}
				data.keywords = that.searchText
				data.sort_type = that.sort1.str
				data.sort_order = that.sort1.sort_order
				console.log('打印提交参数', data)
				this.$mrequest({
					url: 'Mini/goods/goodsList',
					method: 'POST',
					data: data,
					callBack:function callBack (res) {
						if (res.status) {
							that.goodsList = res.data.data
							if (that.goodsList.length > 0) {
								that.showflag = false
								var left = []
								var leftHeight = 0
								var right = []
								var rightHeight = 1
								that.goodsList.map((item, index) => {
									if (leftHeight < rightHeight) {
										if (item.full_reductions.length > 0) {
											leftHeight += 260
										} else {
											leftHeight += 234
										}
										left.push(item)
									} else {
										if (item.full_reductions.length > 0) {
											rightHeight += 260
										} else {
											rightHeight += 234
										}
										right.push(item)
									}
								})
								that.leftData = left
								that.rightData = right
							} else {
								that.showflag = true
								that.leftData = []
								that.rightData = []
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			} else {
				//  店铺搜索
				that.$mrequest({
					url: 'Mini/store/StoreList',
					method: 'GET',
					data: {
						keywords: that.searchText,
						sort_type: that.sort1.str,
						sort_order: that.sort1.sort_order
					},
					callBack: function callBack (res) {
						if (res.code == 200) {
							that.storeList = res.data.data
							if (that.storeList.length > 0) {
								that.showflag = false
							} else {
								that.showflag = true
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
			//  搜索完成后保存搜索历史
			that.addHistory()
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f7f6f9;
}
.classifyDetail {
	position: relative;
	.classifyDetail_top {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #ffffff;
		z-index: 10;
	}
	.content {
		width: 100%;
		height: 100%;
		padding-top: calc(260rpx + var(--status-bar-height) + 16rpx);
		box-sizing: border-box;
		overflow: auto;
		padding-bottom: 30rpx;
		.content_goods{
			width: 100%;
			box-sizing: border-box;
			padding: 0 10rpx;
		}
		.store {
			width: 100%;
			height: 346rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 16rpx;
			border-radius: 20rpx;
			background: #fff;
			.store_top {
				width: 100%;
				height: 86rpx;
				display: flex;
				align-items: top;
				justify-content: flex-start;
				.left {
					width: 15%;
					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}
				}
				.center {
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #504d4d;
					}
					.evaluation {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
					}
				}
				.right {
					width: 25%;
					height: 84rpx;
					text-align: center;
					font-size: 18rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #ffb466;
					position: relative;
					view {
						width: 95%;
						height: 40rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0rpx;
						left: 0;
						background: linear-gradient(90deg, #ffffff, #ffeee6);
						border-radius: 0rpx 50rpx 0rpx 0rpx;
					}
				}
			}

			.bottom {
				width: 100%;
				height: 220rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image {
					width: 180rpx;
					height: 180rpx;
					margin-right: 30rpx;
				}
			}
		}

		// .goods {
		// 	width: 100%;
		// 	height: 268rpx;
		// 	padding: 20rpx 30rpx;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: top;
		// 	border-radius: 20rpx;
		// 	margin-bottom: 16rpx;
		// 	background: #fff;
		// 	.left {
		// 		width: 35%;
		// 		text-align: left;
		// 		image {
		// 			width: 210rpx;
		// 			height: 210rpx;
		// 		}
		// 	}
		// 	.right {
		// 		width: 65%;
		// 		.title {
		// 			font-size: 28rpx;
		// 			font-family: Source Han Sans CN;
		// 			font-weight: 500;
		// 			color: #494949;
		// 			overflow: hidden;
		// 			text-overflow: ellipsis;
		// 			display: -webkit-box;
		// 			-webkit-line-clamp: 2;
		// 			-webkit-box-orient: vertical;
		// 			margin-bottom: 10rpx;
		// 		}
		// 		.sku {
		// 			font-size: 22rpx;
		// 			font-family: PingFang SC;
		// 			font-weight: 500;
		// 			color: #999999;
		// 			margin-bottom: 10rpx;
		// 		}
		// 		.price {
		// 			width: 100%;
		// 			display: flex;
		// 			justify-content: space-between;
		// 			margin-bottom: 10rpx;
		// 			font-size: 22rpx;
		// 			font-family: PingFang SC;
		// 			font-weight: 500;
		// 			color: #999999;
		// 			view:nth-child(1) {
		// 				text:nth-child(1) {
		// 					display: inline-block;
		// 					margin-right: 16rpx;
		// 					color: #f55519;
		// 					font-size: 32rpx;
		// 				}
		// 			}
		// 		}
		// 		.shopname {
		// 			font-size: 22rpx;
		// 			font-family: PingFang SC;
		// 			font-weight: 500;
		// 			color: #999999;
		// 		}
		// 	}
		// }
	}
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}
	.top {
		width: 100%;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		justify-content: flex-start;
		.back {
			image {
				width: 28rpx;
				height: 28rpx;
			}
			margin: 0 30rpx;
		}
		.serach {
			input {
				width: 423rpx;
				height: 59rpx;
				background: #f6f6f6;
				border-radius: 30px;
				padding-left: 30rpx;
			}
		}
	}
	.tab {
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		view {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #2c2c2c;
		}
		.active {
			color: #34c39e;
		}
	}
	.sort {
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		padding: 0 36rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		view {
			// width: 30%;
			flex: 1;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50rpx;
			color: #000;
			box-sizing: border-box;
			text-align: center;
			.jiantou{
				display: block;
				width: 0;
				height: 0;
				border-color: transparent transparent #333333 transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
				border-style: solid;
				border-width: 0 10rpx 10rpx 10rpx;
				transform: rotate(180deg);
				margin-left: 10rpx;
				margin-top: 5rpx;
			}
			.active{
				border-color: transparent transparent #f55519 transparent;
			}
		}
		// view:nth-child(1){
		// 	width: 40%;
		// }
	
		.active {
			color: #f55519;
		}
	}
}
</style>
